<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/user.css">
	<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">
	<link rel="stylesheet" type="text/css" href="/bower_components/cropper/dist/cropper.css">
</head>
<body>
	<% include head %>
	<div class="myself-top-head">
		<img src="/images/myselfTitle.png" class="myself-top-img">
	</div>
	<div class="container">
		<div class="row ">
			<% include usermodle %>
	  		<div class="col-md-8  body-right">
	  			<span class="body-right-titlesp"></span>
	  			<p class="body-right-title">&nbsp;&nbsp;文章管理</p>
		  		<div class="myself-body-div">
					<table class="table table-striped table-condensed table-bordered">
						<thead>
							<tr>
								<th>标题</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<% for(var i=0; i< articles.length; i++){%>
								<tr>
									<th><p style="width:10em ; overflow: hidden;text-overflow: ellipsis; "><%-articles[i].name%></p></th>
									<th>
										<button value="/articles/<%-articles[i]._id%>" class="btn btn-sm btn-danger del">
											<span class="glyphicon glyphicon-trash"></span>
										</button>
										<span></span>
										<button data-id="<%-articles[i]._id%>" class="btn btn-sm btn-info updata" data-toggle="modal" data-target=".bs-example-modal-lg">
											<span class="glyphicon glyphicon-pencil"></span>
										</button>
									</th>
								</tr>	
							<%}%>
						</tbody>
					</table>
		  		</div>
	  		</div>
		</div>
	</div>

	<div id="mymodal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-keyboard="false" data-backdrop="false">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modla-title"></h4>
				</div>
				<div class="modal-body">
					<div id="editor" style="height:400px;max-height:500px;">
						<p>请输入内容...</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default clo" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary save">保存</button>
				</div>
			</div>
		</div>
	</div>

	<% include foot %>

	<script src="/bower_components/cropper/dist/cropper.js"></script>
	<script type="text/javascript" src="/js/wangEditor.min.js"></script>
	<script type="text/javascript">
		$('#user-articlelist').addClass("active");
		var updataArticleName = ''
		var editor = new wangEditor('editor');

		editor.config.menus = $.map(wangEditor.config.menus, function(item, key){
			if (item === 'location') {
				return null
			}
			if (item === 'video') {
				return null
			}
			if (item === 'redo') {
				return null
			}
			if (item === 'source') {
				return null
			}
			if (item === 'table') {
				return null
			}
			if (item === 'forecolor') {
				return null
			}
			if (item === 'bgcolor') {
				return null
			}
			if (item === 'strikethrough') {
				return null
			}
			if (item === 'fullscreen') {
				return null
			}
			if (item === 'fontfamily') {
				return null
			}
			return item;
		})

		editor.config.uploadImgUrl = '/articles/articleImg'
		editor.config.uploadImgFileName = 'articleimg'

		editor.create();

		$('.del').click(function(){
			var href = $(this).attr('value')
			ajaxs(href,'',$(this),'delete',function deleteList(data, btn){

				if (data.status == 200) {
					deleteRow(btn)
				} else if(data.status == 403){
					alert('error')
				}
			})
		})
	
		function deleteRow(btn) {
			// console.log(btn.parent().parent())
			btn.parent().parent().remove()
		}

		$('.updata').click(function(){
			var href = '/articles/list/'+$(this).data('id')
			ajaxs(href, '', $(this), 'get', function getContent(data){
				insertModal(data)
			})
		})

		$('.save').click(function(){
			$.ajax({
				url:'/articles/updata/',
				type:'put',
				data:{
					staticpath:updataArticleName,
					text:editor.$txt.html()
				},
				success:function(data){
					console.log(data)
				}
			})
		})

		function ajaxs(url,content,btn,type,callback) {
			$.ajax({
				type:type,
				url:url,
				data:content,
				success:function(data){
					callback(data, btn);
				}
			})
		}

		function insertModal(data){
			$('h4').text('')
			$('h4').append(data.article.name);
			updataArticleName = data.article.staticpath
			editor.$txt.html(data.article.content)
		}

	</script>
</body>